import { Graph } from "@antv/x6";
import { rtEdge } from "../../shape/edge";

let graph = null
export function initGraph(option) {
    graph = new Graph({
        container: document.getElementById(option.id),
        history: true, //撤销/重做
        snapline: true, //对齐线
        panning: true, //可拖拽
        isRound:false,//是否为圆角
        background: { color: "#EBEEF1" },
        mousewheel: {
            enabled: true,
            modifiers: ["ctrl", "meta"],
        },
        selecting:{ enabled: true,
            selectNodeOnMoved: false,
        },
        // scroller: true,
        // minimap: {
        //   enabled: true,
        //   container: document.getElementById("miniMap"),
        // },
        connecting: {
            allowBlank: false,
            allowMulti: false,
            allowLoop: false,
            allowNode: false,
            allowEdge: false,
            allowPort: true,
            highlight: true,
            snap: { radius: 20 }, //自动吸附
            connector: "pai",
            sourceAnchor: "bottom",
            targetAnchor: "center",
            connectionPoint: "anchor",
            createEdge() {
                return new rtEdge({
                    attrs: {
                        line: {
                            strokeDasharray: "5 5",
                            stroke: "#808080",
                            strokeWidth: 1,
                            targetMarker: {
                                name: "block",
                                args: {
                                    size: "6",
                                },
                            },
                        },
                    },
                });
            },
            validateEdge: (args) => {
                const { edge } = args;
                return !!(edge?.target).port;
            },
            // 是否触发交互事件
            validateMagnet({ magnet }) {
                return magnet.getAttribute("port-group") !== "in";
            },
            // 显示可用的链接桩
            validateConnection({
                sourceView,
                targetView,
                sourceMagnet,
                targetMagnet,
            }) {
                // 不允许连接到自己
                if (sourceView === targetView) {
                    return false;
                }

                // 只能从输出链接桩创建连接
                if (
                    !sourceMagnet ||
                    sourceMagnet.getAttribute("port-group") === "in"
                ) {
                    return false;
                }

                // 只能连接到输入链接桩
                if (
                    !targetMagnet ||
                    targetMagnet.getAttribute("port-group") !== "in"
                ) {
                    return false;
                }
                
                // 判断目标链接桩是否可连接
                const portId = targetMagnet.getAttribute("port");
                const node = targetView.cell;
                const port = node.getPort(portId);
                if(option.multiParent){
                    return true
                }
                return !(port && port.connected);
            },
        },
        highlighting: {
            // 当链接桩可以被链接时，在链接桩外围渲染一个 4px 宽的红色矩形框
            magnetAvailable: {
                name: "stroke",
                args: {
                    padding: 4,
                    attrs: {
                        "stroke-width": 6,
                        "stroke-color": "rgba(57, 202, 116, 0.6);",
                    },
                },
            },
        },
    });
    graph.disableMultipleSelection();
}

export function getGraph(){
    return graph
}

